<template>
	<view>
		<view class="header status_bar">
			<!-- <view class="back icon-gengduo-copy" @tap="backPage"></view> -->
			<view class="text">抢券</view>
		</view>
		<!-- <view class="clear_box"></view> -->

		<view class="bg_box">
			<image class="bg01" src="../../static/img01/bg05.png" mode="widthFix"></image>
			<view class="bg_content">
				<view class="remind_box">
					<view class="time">每日<text>10点开抢</text></view>
					<view class="switch_box">
						<view class="text">打开提醒</view>
						<switch style="transform:scale(0.7)" color="#FF3A3C" :checked="checkeData" @change="switch1Change"  />
					</view>
				</view>
				<view class="coupon_box">
					<image class="bg02" src="../../static/img01/bg06.png" mode="widthFix"></image>
					<view class="coupon_content">
						<view class="title">限时抢购 限量100张</view>
						<view class="text">无门槛抵用券</view>
						<view class="money">
							<view class="r">￥</view>
							<view class="m">300</view>
						</view>
						<view class="menu">立即抢券</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				select: 0,
				info: '',
				checkeData:false,
			};
		},
		onLoad(options) {
			let that = this;
		},
		onShow() {
			let that = this;
			//that.loadData()
		},
		methods: {
			switch1Change: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.target.value);
				this.checkeData = e.target.value;
				// if(this.checkeData == true){
				// 	this.whether = 1
				// }else if(this.checkeData == false){
				// 	this.whether = 0
				// }
			},
			loadData() {
				let that = this;
				that.Net._get('user/addresses', {
					per_page: '10',
					page: that.page
				}, res => {
					if (res.code == 200) {
						//console.log(res)
						that.address = res.data.data;
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			}



		},

	};
</script>

<style>
	page{
		background-color: #FFF5F0;
	}
	.header {
		background-color: transparent !important;
	}


	.header .text {
		background-color: transparent !important;
		color: #fff;
	}
	
	.bg_box{
		width: 100%;
		position: relative;
	}
	
	.bg_box .bg01{
		width: 100%;
		display: block;
	}
	
	.bg_box .bg_content{
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(32vh + var(--status-bar-height));
		z-index: 99;
		padding-bottom: 15vw;
		background-color: #fff;
		border-radius: 4vw;
		padding: 4vw;
	}
	
	.remind_box{
		width: 100%;
		display: flex;
		align-items: center;
		font-weight: bold;
	}
	
	.remind_box .time{
		font-size: 4.5vw;
		color: #333;
	}
	
	.remind_box .time text{
		color: #FF3A3C;
	}
	
	.remind_box .switch_box{
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	
	.remind_box .switch_box .text{
		font-size: 3.2vw;
		color: #666666;
		font-weight: 500;
	}
	
	.coupon_box{
		width: 100%;
		margin-top: 4%;
		position: relative;
	}
	
	.coupon_box .bg02{
		width: 100%;
		display: block;		
	}
	
	.coupon_box .coupon_content{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	
	.coupon_box .coupon_content .title{
		font-size: 5vw;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-top: 1.8vw;
		font-weight: bold;
	}
	
	.coupon_box .coupon_content .text{
		font-size: 4.6vw;
		color: #985131;
		text-align: center;
		width: 100%;
		margin-top: 4.2vw;
		font-weight: bold;
	}
	
	.coupon_box .coupon_content .money{
		width: 100%;
		margin-top: 2vw;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		color: #FF0B0E;
		font-weight: bold;
	}
	
	.coupon_box .coupon_content .money .r{
		font-size: 7vw;
		margin-top: 4vw;
		
	}
	
	.coupon_box .coupon_content .money .m{
		font-size: 22vw;
		
	}
	
	.coupon_box .coupon_content .menu{
		width: 46%;
		margin: 4vw auto 0;
		height: 12vw;
		border-radius: 12vw;
		font-size: 6vw;
		color: #fff;
		font-weight: bold;
		line-height: 12vw;
		text-align: center;
		background: linear-gradient(#FF7B39, #FF2B4C);
	}
</style>